<template>
  <div class="box">
    <el-carousel :interval="5000" arrow="always" height="300px">
      <el-carousel-item v-for="(image, index) in personList" :key="index">
        <img :src="image" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts" name="CarouselTool">
import { ref } from "vue";
let personList = ref([
  "https://pic.huke88.com/image/000/000/000/F4C630F9-CBBA-EC31-A9D1-9E585B2768D4.png",
  "https://pic.huke88.com/image/000/000/000/5C80D381-277F-C355-80EF-8664CDCA4B7D.png",
  "https://pic.huke88.com/image/000/000/000/961E0763-8926-171E-9CB3-7F44C260B3E4.png",
  // ...更多图片URL
]);
</script>

<style scoped lang="less">
.box {
  width: 100%;
  height: 200px;
  margin: 0 auto;
  background-color: #fff;
   .el-carousel__container {
    height: 200px ;
  }
}
.carousel-image {
  width: 100%;
  display: block; /* 确保图片不会有额外的空间 */
}
</style>
